<script setup>
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { useOrderStore } from '@/stores/orderStore';
import { useUserStore } from '@/stores/userStore';
import {
    refundAPI,
    getOrderListByUidAPI,
    getOrderListByUidAndStateAPI,
    updateOrderAddressAPI,
    reOrderAPI
} from '@/apis/order';
import { usePayStore } from '@/stores/payStore';
import { ElMessageBox, ElMessage } from 'element-plus';
const route = useRouter()
const selector = ref(0)
const orderList = ref([])

onMounted(async () => {
    const id = useUserStore().userInfo.data.uid;
    const res = await getOrderListByUidAPI(id);
    orderList.value = res.data;
})
const visable = ref(0);
const details = ref({
    tolPrice: 0,
    discount: 0,
    payment: 0,
    goodsList: []
})
const showDetails = async (order) => {
    visable.value = 1
    details.value = order
}
const doPay = async (oid) => {
    ElMessageBox.confirm('即将跳转到支付界面', '信息',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await usePayStore().getOrderDetails(oid)
        usePayStore().setLastPage(2)
        route.replace({ path: '/pay' })
    }).catch(() => { })
}

const query = async () => {
    if (selector.value == 0) {
        const id = useUserStore().userInfo.data.uid;
        const res = await getOrderListByUidAPI(id);
        orderList.value = res.data;
        return;
    }
    const id = useUserStore().userInfo.data.uid;
    const res = await getOrderListByUidAndStateAPI(id, selector.value);
    orderList.value = res.data;
}
const visable2 = ref(0);
const logistics = ref({})
const checkLogistics = async (eid, company) => {
    logistics.value = { eid, company }
    visable2.value = 1;
}
const doRefund = async (oid) => {
    ElMessageBox.prompt('请填写退款原因：', '确定退款吗？(该操作不可逆)',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
        }
    ).then(async (content) => {
        const uid = useUserStore().userInfo.data.uid;
        const res = await refundAPI(oid, uid, content.value)
        if (res.code == 1) {
            query()
            ElMessage({ type: 'success', message: '您的退款申请已提交，我们将尽快处理您的请求' })
        }

    }).catch(() => {

    })

}
const state = ref([
    "全部",
    "待付款",
    "付款逾期",
    "待发货",
    "运输中",
    "待签收",
    "已签收",
    "已退款"
])


const modifyAddress = (oid) => {
    ElMessageBox.prompt("请输入修改后的地址", "修改收货地址", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(async content => {
        await updateOrderAddressAPI(oid, content.value);
        query()
    })
}
const reOrder = (oid) => {
    ElMessageBox.confirm("确定恢复订单吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(async () => {
        await reOrderAPI(oid);
        ElMessage({ type: "success", message: "订单已恢复,请在1小时内付款~" })
        query()
    })
}
</script>
<template>
    <el-container>
        <el-header
            style="text-align: center; border-top-right-radius: 5px;border-top-left-radius: 5px; background-color: black;padding: 0px;height: 50px;color:#cdcdcd;">
            <el-link :underline="false" style="position:fixed;top:20px;left: 20px;"
                @click="route.replace({ path: '/home' })">&lt;首页</el-link>
            <p style="display: inline-block;margin-block-start: 11px;margin-block-end: 0;">
                我的订单
            </p>
        </el-header>


        <el-main>

            <!-- 订单查询 -->
            <el-select v-model="selector" style="box-shadow:-5px 5px 5px 0px #cdcdcd ;" @change="query">
                <el-option :label="state[0]" :value="0"> </el-option>
                <el-option :label="state[1]" :value="1"> </el-option>
                <el-option :label="state[3]" :value="3"> </el-option>
                <el-option :label="state[4]" :value="4"> </el-option>
                <el-option :label="state[5]" :value="5"> </el-option>
                <el-option :label="state[6]" :value="6"></el-option>
                <el-option :label="state[7]" :value="7"></el-option>
                <el-option :label="state[2]" :value="2"> </el-option>
            </el-select>
            <p style="display: inline-block;margin-left: 20px;color:#666666">共&nbsp;{{ orderList.length }}&nbsp;条订单
            </p>

            <!-- 订单列表 -->
            <el-table :data="orderList" :border="true"
                style="box-shadow:0 10px 5px 5px #cdcdcd ;width: 100% ;height:500px ;overflow:auto;">
                <el-table-column prop="oid" label="订单编号" width="150px" />
                <el-table-column align="left" label="商品信息" width="300px">
                    <template #default="scope">
                        <div v-for="item in scope.row.goodsList" style="display: flex;align-items: center;">
                            <el-image :src="item.good.src" style="width: 50px;height: 50px;"></el-image>
                            <p>{{ item.good.gname }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="payment" label="付款金额" width="100px" />
                <el-table-column label="收货地址">
                    <template #default="scope">
                        <el-link v-if="scope.row.state == 3 || scope.row.state == 1" @click="modifyAddress(scope.row.oid)">
                            {{ scope.row.address }}</el-link>
                        <p v-else>{{ scope.row.address }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="订单详情" width="100px" align="center">
                    <template #default="scope">
                        <el-link @click="showDetails(scope.row)">查看</el-link>

                    </template>
                </el-table-column>
                <el-table-column align="center" label="订单状态" width="150px">
                    <template #default="scope">
                        <el-link v-if="scope.row.state == 4"
                            @click="checkLogistics(scope.row.eid, scope.row.company)">运输中</el-link>
                        <p v-else>{{
                            state[scope.row.state]
                        }}</p>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="120px" style="position: relative;">
                    <template #default="scope">
                        <el-button v-if="scope.row.state == 1" type="success" plain size="small"
                            @click="doPay(scope.row.oid)">支付订单</el-button>
                        <template
                            v-else-if="scope.row.state == 4 || scope.row.state == 5 || scope.row.state == 6 || scope.row.state == 5">
                            <el-button type="success" plain size="small" @click="doRefund(scope.row.oid)">申请退款</el-button>
                            <p v-if="scope.row.refund != null && scope.row.refund.agree == 0"
                                style="position: absolute;top:0;left:0;font-size: 10px;color: brown; ">退款中</p>
                            <p v-else-if="scope.row.refund != null && scope.row.refund.agree == 2"
                                style="position: absolute;top:0;left:0;font-size: 10px;color: brown;">已驳回</p>
                        </template>
                        <el-button v-else-if="scope.row.state == 2" type="success" plain size="small"
                            @click="reOrder(scope.row.oid)">恢复订单</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-main>

    </el-container>

    <!-- 商品详情 -->
    <el-dialog v-model="visable" title="商品详情" style="width: 1000px;">
        <el-descriptions title="金额明细" :column="2" style="width: 800px;">
            <el-descriptions-item label="商品件数：">
                {{ details.goodsList.length }}件
            </el-descriptions-item>

            <el-descriptions-item label="商品总价：">
                ￥{{ details.tolPrice }}
            </el-descriptions-item>

            <el-descriptions-item label="优惠减免：">
                ￥{{ details.discount }}
            </el-descriptions-item>

            <el-descriptions-item label="实际支付：">
                <p style="font-size: 20px;display: inline-block;color:brown">
                    ￥{{ details.payment }}
                </p>
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="商品信息" style="width: 700px;">
            <el-descriptions-item>
                <el-table :data="details.goodsList">
                    <el-table-column label="商品编号" prop="gid" width="150px" />
                    <!-- 商品信息 -->
                    <el-table-column label="商品信息" width="250px" align="center">
                        <template #default="scope">
                            <div style="display: flex;align-items: center; width: 320px;">
                                <el-image :src="scope.row.good.src" style="width:100px;height: 100px;"></el-image>
                                <p style="margin-left:10px ;text-align: left;color:#666666;font-size: 16px;;">{{
                                    scope.row.good.gname }}
                                </p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="单价" width="200px" align="center">
                        <template #default="scope">
                            <p style="text-align: center;">￥{{ scope.row.good.price }}</p>
                        </template>
                    </el-table-column>
                    <!-- 数量 -->
                    <el-table-column label="数量" width="180px" align="center">
                        <template #default="scope">
                            <p style="text-align: center;">x{{ scope.row.count }}</p>
                        </template>
                    </el-table-column>
                    <!-- 总价 -->
                    <el-table-column label="总价" width="180px" align="center">
                        <template #default="scope">
                            <p style="text-align: center;color:brown">￥{{ scope.row.tolPrice }}</p>
                        </template>
                    </el-table-column>
                </el-table>
            </el-descriptions-item>
        </el-descriptions>
    </el-dialog>

    <!-- 物流信息 -->
    <el-dialog v-model="visable2" title="物流详情" style="width: 500px;">
        <el-descriptions title="" :column="1" style="width: 400px;">
            <el-descriptions-item label="物流公司：">
                {{ logistics.company }}
            </el-descriptions-item>

            <el-descriptions-item label="快递单号：">
                {{ logistics.eid }}
            </el-descriptions-item>

            <el-descriptions-item label="">

            </el-descriptions-item>

        </el-descriptions>

    </el-dialog>
</template>

